<template>
  <div class="tab-list">
    <div
      class="tab-item"
      :class="{ active: value === item[valueName], disabled: item.disabled }"
      :title="item.title"
      v-for="(item, index) of tabList"
      :key="item.label + '' + index"
      @click="handleChoose(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script lang="ts">
import { computed } from "vue";
export default {
  name: "EwgTab",
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    value: {
      type: [Number, String],
      required: true
    },
    useLabel: {
      type: Boolean,
      default: false
    }
  },
  setup(props: any, context: any) {
    const valueName = computed(() => {
      return props.useLabel ? "label" : "value";
    });
    const handleChoose = (row: any) => {
      if (row.disabled) return;
      if (row[valueName.value] === props.value) return;
      context.emit("update:value", row[valueName.value]);
    };
    return {
      handleChoose,
      valueName
    };
  }
};
</script>
<style lang="scss" scoped>
.tab-list {
  margin: 5px;
  display: flex;
  align-items: center;
  color: $--color-white-half;
  .tab-item {
    cursor: pointer;
    margin-left: 5px;
    &:first-of-type {
      margin-left: 0;
    }
    &:hover {
      color: $--color-white;
    }
    &:active {
      color: $--color-white-half-quarter;
    }
    &.active {
      color: $--color-white;
    }
    &.disabled {
      cursor: not-allowed;
      color: $--color-white-quarter;
    }
  }
}
</style>
